<template>
    <div class="login">
        <div class="loginLeft">
            <img src="../../assets/auth.png">
        </div>
        <div class="registRight">
            <el-form  v-model="login"  :rules="rules" style="width: 400px;padding-top: 140px;  text-align:center;"
      ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
            label="用户名"
            prop="username"
        >
            <el-input placeholder="用户名：6位数以上的字母和数字组成"  v-model="login.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
        > <el-input placeholder="密码：至少6位数组成" type="password" v-model="login.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>没有账号？<router-link :to="{name:'regist'}" >去注册</router-link></el-form-item>
            
        <el-form-item>
            <el-button style="width:200px;margin-top:30px;" type="primary" @click="jump">登陆</el-button>
        </el-form-item>
        </el-form>
        </div>
    </div>
</template>
<script>
import {  mapMutations } from 'vuex'
export default ({
    name:'login',
    data(){
        let validateUsername = (rule, value, callback)=>{
            if(this.login.username == null){
                return callback(new Error('请输入用户名'))
            }else{
               console.log(this.login.username)
            }
        }
        let validatePassword = (rule, value, callback)=>{
            if(this.login.password == null){
                return callback(new Error('请输入密码'))
            }else{
                console.log(this.login.password)
            }
        }
        return{
            login:[],
            rules:{
                username:[
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password:[
                    { validator: validatePassword, trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        ...mapMutations(['userLogin']),
        async jump(){
            const data = await this.aPost('/user/login',{
                username:this.login.username,
                password:this.login.password,
            });
            console.log('data', data);
            this.userLogin( data )
            localStorage.setItem('user',JSON.stringify(data.user))
            localStorage.setItem('id', data.user._id)
            if(data.success == true){
                this.$router.push({
                    name:'mail'
                })
            }
        }
    }
})
</script>
<style lang="scss">
.login{
    width: 900px;
    height: 500px;
    margin: 100px auto;
    box-shadow: 0 0 6px #333;
    display: flex;
    justify-content: space-around;
    img{
        width: 380px;
        height: 460px;
        margin: 20px 10px;
    }
}
</style>
